<template>
  <div class="mod-demo-echarts">
    <div id="J_chartPieBox" class="chart-box"></div>
  </div>
</template>

<script>
import echarts from 'echarts'
export default {
  data () {
    return {
      chartPie: null,
      options: []
    }
  },
  created () {
    this.queryTeacherJob()
  },
  methods: {
    // 获取教师职称分类
    queryTeacherJob () {
      console.log('queryTeacherJob')
      this.$http({
        url: this.$http.adornUrl('/edu/teduteacherinfo/queryTeacherJob'),
        method: 'get'
      }).then(({data}) => {
        if (data && data.code === 0) {
          this.options = data.data
          console.log(this.options)
          this.initChartPie()
        } else {
          this.$message.error(data.msg)
        }
      })
    },
    // 饼状图
    initChartPie () {
      console.log('initChartPie')
      console.log(this.options)
      var option = {
        title: {
          text: 'Professional Title Overview',
          bottom: 'auto',
          textStyle: {
            fontSize: 30
          },
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: (params) => {
            console.log(this.options[params.dataIndex])
            let str = 'Relevant teachers：</br>'
            this.options[params.dataIndex].dataList.map(item => {
              str += item + '</br>'
            })
            return str
          }
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            type: 'pie',
            radius: '80%',
            data: this.options,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
      this.chartPie = echarts.init(document.getElementById('J_chartPieBox'))
      this.chartPie.setOption(option)
      window.addEventListener('resize', () => {
        this.chartPie.resize()
      })
    }
  }
}
</script>
<style lang="scss">
  .mod-demo-echarts {
    .chart-box {
      min-height: 600px;
    }
  }
</style>
